<template>
  <view class="patient-container">
    <!-- 就诊人列表 -->
    <view class="patient-list">
      <view 
        class="patient-item card"
        v-for="(patient, index) in patients"
        :key="index"
        @tap="selectPatient(patient)"
      >
        <view class="info">
          <text class="name">{{ patient.name }}</text>
          <text class="tag" v-if="patient.isDefault">默认</text>
        </view>
        <view class="details">
          <text>{{ patient.gender }} {{ patient.age }}岁</text>
          <text class="divider">|</text>
          <text>{{ patient.idType }}：{{ patient.idNo }}</text>
        </view>
        <view class="card-info" v-if="patient.cardNo">
          <text class="label">就诊卡号：</text>
          <text class="value">{{ patient.cardNo }}</text>
        </view>
        <text class="iconfont icon-arrow-right"></text>
      </view>
    </view>
    
    <!-- 添加就诊人按钮 -->
    <view class="add-btn" @tap="addPatient">
      <text class="iconfont icon-add"></text>
      <text>添加就诊人</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 就诊人列表
const patients = ref([
  {
    id: 1,
    name: '张三',
    gender: '男',
    age: 45,
    idType: '身份证',
    idNo: '440***********1234',
    cardNo: '1234567890',
    isDefault: true
  },
  {
    id: 2,
    name: '张小明',
    gender: '男',
    age: 12,
    idType: '身份证',
    idNo: '440***********5678',
    cardNo: '0987654321',
    isDefault: false
  }
])

// 选择就诊人
const selectPatient = (patient) => {
  // 获取预约信息
  const pages = getCurrentPages()
  const prevPage = pages[pages.length - 2]
  const { departmentId, hospitalId, doctorId, scheduleId } = prevPage.$page?.options || {}
  
  // 跳转到确认页面
  uni.navigateTo({
    url: `/pages/appointment/confirm?patientId=${patient.id}&departmentId=${departmentId}&hospitalId=${hospitalId}&doctorId=${doctorId}&scheduleId=${scheduleId}`
  })
}

// 添加就诊人
const addPatient = () => {
  uni.navigateTo({
    url: '/pages/my/patient-edit'
  })
}
</script>

<style lang="scss">
.patient-container {
  min-height: 100vh;
  background: $bg-color;
  padding: 20rpx;
  
  .patient-list {
    .patient-item {
      position: relative;
      padding: 30rpx;
      margin-bottom: 20rpx;
      background: #fff;
      border-radius: $radius-lg;
      box-shadow: $shadow-sm;
      
      .info {
        display: flex;
        align-items: center;
        margin-bottom: 12rpx;
        
        .name {
          font-size: 32rpx;
          color: $text-primary;
          font-weight: bold;
          margin-right: 12rpx;
        }
        
        .tag {
          font-size: 22rpx;
          color: $primary-color;
          background: $primary-light;
          padding: 4rpx 12rpx;
          border-radius: $radius-sm;
        }
      }
      
      .details {
        margin-bottom: 12rpx;
        
        text {
          font-size: 26rpx;
          color: $text-regular;
          
          &.divider {
            margin: 0 16rpx;
            color: $text-secondary;
          }
        }
      }
      
      .card-info {
        .label {
          font-size: 26rpx;
          color: $text-regular;
        }
        
        .value {
          font-size: 26rpx;
          color: $primary-color;
        }
      }
      
      .icon-arrow-right {
        position: absolute;
        right: 30rpx;
        top: 50%;
        transform: translateY(-50%);
        font-size: 24rpx;
        color: $text-secondary;
      }
      
      &:active {
        transform: scale(0.99);
      }
    }
  }
  
  .add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100rpx;
    background: #fff;
    border-radius: $radius-lg;
    margin-top: 40rpx;
    box-shadow: $shadow-sm;
    
    .iconfont {
      font-size: 32rpx;
      color: $primary-color;
      margin-right: 8rpx;
    }
    
    text {
      font-size: 30rpx;
      color: $primary-color;
    }
    
    &:active {
      background: darken(#fff, 2%);
    }
  }
}
</style>
 